<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun(){
            alert("单击")
        }
        function fun2(){
            alert("双击")
        }
        function fun3(){
            console.log("鼠标悬停了");
            
        }function fun4(){
            console.log("鼠标移动");
            
        }function fun5(){
            console.log("鼠标离开");
            
        }
        function fun6(){
            console.log("按键按下");
            
        }function fun7(){
            console.log("按键抬起");
        }
        
        /* 
        1.元素属性绑定
        2.dom编辑动态绑定
        

        2.
        1.鼠标事件
        2.键盘事件
        3.表单事件
        4。页面加载事件


        3.事件触发
            1.行为触发
            2.dom编程触发
        */
       function testFocus(){
            console.log("获得焦点");
            
       }
       function testbulr(){
        console.log("失去焦点");
        
       }
       function testChange(value){
        console.log("内容改变为"+value);
        
       }function testChange2(value){
        console.log("选项改变为"+value);
        
       }
       function testSubmit(){
        /* 
        alert()信息提示框
        prompt()信息输入框
        confirm信息确认框
        */
/*        var f= confirm("表单发生提交")
       if(!f){
        //阻止组件的默认行为
        //event.preventDefault();
        return false
       }
       return true */
       return confirm("表单发生提交")
       }
       function testReset(){
        alert("表单要重置了");
        
       }
       

    </script>
</head>
<body>
    <form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
        用户名称：<input type="text"
                        name="realName" 
                        onfocus="testFocus()"
                        onblur="testbulr()"
                        onchange="testChange(this.value)"><br>
        登入账号：<input type="text" name="logoNmae"><br>
        选择籍贯：
                <select onchange="testChange2(value)">
                        <option>北京</option>
                        <option>上海</option>
                        <option>川渝</option>
                </select>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </form>





    <hr>
    <input 
    type="button" 
    value="按钮" 
    onclick=""
    ondblclick="fun2()"
    >
    <br>
    <img src="img/test.png" onmouseover="fun3()" onmouseleave="fun5()" onmousemove="fun4()">
    <br>
    <input type="text" onkeydown="fun6()" onkeyup="fun7()">

</body>
</html>